<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
  },
});
</script>

<template>
  <view class="task-item">
    <image class="task-item-bg" :src="info.pic_url" />
    <view class="task-item-desc">{{ info.desc }}</view>
  </view>
</template>

<style lang="scss">
.task-item {
  position: relative;

  .task-item-bg {
    display: block;
    width: 324rpx;
    height: 160rpx;
  }

  .task-item-desc {
    position: absolute;
    left: 30rpx;
    bottom: 16rpx;
    width: 150rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }
}
</style>